import React from 'react';
import { Card } from 'antd';
// import echartTheme from './../themeLight'
//不是按需加载的话文件太大
//import echarts from 'echarts'
//下面是按需加载
import echarts from 'echarts/lib/echarts'
//导入折线图
import 'echarts/lib/chart/line';  //折线图是line,饼图改为pie,柱形图改为bar
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';
import ReactEcharts from 'echarts-for-react';
export default class Line extends React.Component {

  componentWillMount () {
    //主题的设置要在willmounted中设置
    // echarts.registerTheme('Imooc',echartTheme);
  }
  getOption = (title) => {
    let option = {
      title: {
        text: title,
        left: 30,
        textStyle:{
          fontSize: 16
        },
        top: 20
      },
      tooltip: {
        trigger: 'item'
      },
      color: ['#15aa50','#ff4242','#f78b2c','#fed732'],
      legend: {
        left: 30,
        bottom: 20,
      },
      series: [
        {
          name: title,
          type: 'pie',
          selectedMode: 'single',
          selectedOffset: 8,
          radius: '50%',
          data: [
            { value: 1048, name: '正常访问' },
            { value: 435, name: '异常访问' ,selected: true},
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    return option
  }

  render () {
    let { data, title } = this.props;
    return (
      <div>
        <ReactEcharts option={this.getOption(title)} theme="Imooc" style={{ height: '300px' }} />
      </div>
    )
  }
}